<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>layer</title>
</head>
<body>
    <div class="card msg">
        <div class="card-header">
            <button class="msg-button">短消息</button>
            <button class="msg-button">停顿4秒</button>
            <button class="msg-button">顶部消息</button>
            <button class="msg-button">底部消息</button>
            <button class="msg-button">带图标</button>
            <button class="msg-button">白色风格</button>
            <button class="msg-button">回调函数</button>
        </div>
        <div class="card-body">
            <div class="info table-responsive">
                <table class="table table-bordered">
                    <tr>
                        <td colspan="3">
                            表达式: layer.msg(
                                <em>tip</em>,
                                <em>config</em>,
                                <em>end</em>
                            )
                        </td>
                    </tr>
                    <tr>
                        <td width="120">参数</td>
                        <td width="200">说明</td>
                        <td>属性</td>
                    </tr>
                    <tr>
                        <td>tip</td>
                        <td>消息内容</td>
                        <td>[类型: string] [必填]</td>
                    </tr>
                    <tr>
                        <td>config.time</td>
                        <td>停顿秒数</td>
                        <td>[类型: number] [可选] [默认: 1]</td>
                    </tr>
                    <tr>
                        <td>config.offset</td>
                        <td>坐标</td>
                        <td>
                            <p>[类型:string] [可选] [默认:m(中间)] [选值]</p>
                            <p>
                                m ===> 中间,
                                t ===> 顶部,
                                r ===> 右边,
                                b ===> 底部,
                                l ===> 左边,
                            </p>
                        </td>
                    </tr>
                    <tr>
                        <td>config.icon</td>
                        <td>图标</td>
                        <td>
                            <p>[类型: number] [可选] [默认: 0 (无图标)] [选值]</p>
                            <p>
                                0 ===> 无图标
                            </p>
                            <p>
                                1 ===> success
                            </p>
                            <p>
                                2 ===> error
                            </p>
                        </td>
                    </tr>
                    <tr>
                        <td>config.type</td>
                        <td>风格</td>
                        <td>
                            <p>[类型: number] [可选] [默认: 1 (黑色)] [选值]</p>
                            <p>
                                1 ===> 黑色
                            </p>
                            <p>
                                2 ===> 白色
                            </p>
                        </td>
                    </tr>
                    <tr>
                        <td>config.zindex</td>
                        <td>层叠顺序</td>
                        <td>[类型:number] [可选] [默认:99999]</td>
                    </tr>
                    <tr>
                        <td>end</td>
                        <td>回调函数</td>
                        <td>[类型:function] [可选] [默认:无]</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <div id="layer_5324682790781989" class="layer layer-bg layer-msg layer-msg-middle xon"><div class="layer-content"><i class="layer-icon layer-icon-success"></i>带图标</div></div>
</body>
<script src="js/layer.js"></script>
<script>
    // 事件封装
    function addEvent(elem, type, handle) {
        if (elem.addEventListener) {
            elem.addEventListener(type, handle, false);
        }else if(elem.attachEvent) {
            elem.attachEvent('on' + type, handle);
        }else{
            elem['on' + type] = handle;
        }
    }
</script>
<script>
(function () {
    // msg start ---------------------------------------------------------------
    var msg_button = document.getElementsByClassName('msg-button');

    for (var i = 0; i < msg_button.length; i++) {
        (function (i) {
            addEvent(msg_button[i], 'click', function() {
                switch (this.innerHTML) {
                    case '短消息':
                        return layer.msg();
                    case '停顿4秒':
                        return layer.msg(this.innerHTML, {time: 4, shade: true});
                    case '顶部消息':
                        return layer.msg(this.innerHTML, {icon: 3, offset: 't'});
                    case '底部消息':
                        return layer.msg(this.innerHTML, {icon: 4, offset: 'b', time: 400});
                    case '带图标':
                        return layer.msg(this.innerHTML, {icon: 1, time: 400});
                    case '白色风格':
                        return layer.msg(this.innerHTML, {icon:2, type: 2});
                    case '回调函数':
                        return layer.msg(this.innerHTML, {
                                icon: 2
                            }, function () {
                                console.log('call back');
                                // alert(666);
                            });
                    default:
                        return layer.msg(this.innerHTML);
                }
            });
        }(i));
    }
    // msg end   ---------------------------------------------------------------
}());
</script>
</html>
